.wraper {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

    &.dark {
        --subtitle-color: #3333331a;
        --title-color: #333;
    }

    &.light {
        --subtitle-color: #ffffff1a;
        --title-color: #fff;
    }
}

.followbox {
    @apply  flex flex-col items-center justify-center w-full ;

    color: #fff;
}

.followbg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    // background: rgba(0, 0, 0, .6);
}

.followtitle{
    @apply font-700;
}

.followdesc {
    @apply font-500;
}

.followbtn{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
}

.followbtn:hover{
    // border: 1px solid #fff;
    background: #fff;
    color: var(--design-theme-color);
}

.followtitle,
.followdesc,
.followbtn{
    z-index: 1;

}

.mobile.wraper {
    .followbox {
        @apply pt-54px pb-40px;
    }

    .followtitle{
        @apply text-2xl;
    }

    .followdesc{
        @apply text-base mt-3;
    }

    .followbtn{
        @apply px-40px py-2.5 mt-30px;

        font-size: 12px;
        line-height: 12px;
    }
}

.pc.wraper {
    .followbox {
        @apply py-76px ;
    }

    .followtitle{
        font-size: 42px;
    }

    .followdesc {
        @apply text-2xl mt-2.5;
    }

    .followbtn{
        @apply px-56px py-8px mt-40px;

        font-size: 16px;
        line-height: 24px;
    }
}
